<template>
    <el-row width="500px" append-to-body>
        <el-form ref="customerRef" :model="customer" :rules="rules" label-width="80px">
            <el-col :span="4">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="customer.name" placeholder="请输入姓名" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="证件类型" prop="documentType">

                    <el-select v-model="customer.documentType">
                        <el-option label="身份证" value="身份证"></el-option>
                        <el-option label="护照" value="护照"></el-option>
                        <el-option label="驾驶证" value="驾驶证"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="身份证号" prop="idNumber">
                    <el-input v-model="customer.idNumber" placeholder="请输入身份证号" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="电话号码" prop="tel">
                    <el-input v-model="customer.tel" placeholder="请输入电话号码" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="信用评级" prop="creditRating">
                    <el-input v-model="customer.creditRating" placeholder="请输入信用评级" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="信用额度" prop="creditLimit">
                    <el-input v-model="customer.creditLimit" placeholder="请输入信用额度" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="客户类型" prop="customerType">
                    <el-select v-model="customer.customerType" placeholder="请选择客户类型">
                        <el-option label="个人" value="个人"></el-option>
                        <el-option label="农户" value="农户"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="4">
                <el-form-item label="乡镇" prop="township">
                    <el-input v-model="customer.township" placeholder="请输入乡镇" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="村" prop="village">
                    <el-input v-model="customer.village" placeholder="请输入村" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="组" prop="group">
                    <el-input v-model="customer.group" placeholder="请输入组" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="用户ID" prop="userId">
                    <el-input v-model="customer.userId" placeholder="请输入用户ID" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="支行" prop="branch">
                    <el-input v-model="customer.branch" placeholder="请输入支行" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="客户别名" prop="customerAlias">
                    <el-input v-model="customer.customerAlias" placeholder="请输入客户别名" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="信用金额" prop="creditAmount">
                    <el-input v-model="customer.creditAmount" placeholder="请输入信用金额" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="五级结果" prop="fiveLevelResult">
                    <el-input v-model="customer.fiveLevelResult" placeholder="请输入五级结果" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="贷款余额" prop="loanBalance">
                    <el-input v-model="customer.loanBalance" placeholder="请输入贷款余额" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="客户等级" prop="customerClass">
                    <el-input v-model="customer.customerClass" placeholder="请输入客户等级" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="是否真实" prop="isTrue">
                    <el-input v-model="customer.isTrue" placeholder="请输入是否真实" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="证件有效期" prop="certificateExpirationDate">
                    <el-date-picker clearable v-model="customer.certificateExpirationDate" type="date"
                        value-format="YYYY-MM-DD" placeholder="请选择证件有效期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="性别" prop="gender">
                    <el-input v-model="customer.gender" placeholder="请输入性别" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="民族" prop="nation">
                    <el-input v-model="customer.nation" placeholder="请输入民族" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="政治面貌" prop="politicalLandscape">
                    <el-input v-model="customer.politicalLandscape" placeholder="请输入政治面貌" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="最高学历" prop="highestEducationalLevel">
                    <el-input v-model="customer.highestEducationalLevel" placeholder="请输入最高学历" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="最高学位" prop="highestDegree">
                    <el-input v-model="customer.highestDegree" placeholder="请输入最高学位" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="户籍地址" prop="registeredResidenceAddress">
                    <el-input v-model="customer.registeredResidenceAddress" placeholder="请输入户籍地址" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="详细地址" prop="detailedAddress">
                    <el-input v-model="customer.detailedAddress" placeholder="请输入详细地址" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="居住地址" prop="residentialAddress">
                    <el-input v-model="customer.residentialAddress" placeholder="请输入居住地址" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="地址邮编" prop="addressPostalCode">
                    <el-input v-model="customer.addressPostalCode" placeholder="请输入地址邮编" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="微信账号" prop="WeChat account">
                    <el-input v-model="customer.WeChatAccount" placeholder="请输入微信账号" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="户主" prop="headHousehold">
                    <el-input v-model="customer.headHousehold" placeholder="请输入户主" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="贫困户" prop="poorFarmers">
                    <el-input v-model="customer.poorFarmers" placeholder="请输入贫困户" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="家庭人口" prop="familySize">
                    <el-input v-model="customer.familySize" placeholder="请输入家庭人口" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="开户银行" prop="relationshipBank">
                    <el-input v-model="customer.relationshipBank" placeholder="请输入开户银行" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="存款账号" prop="depositAccount">
                    <el-input v-model="customer.depositAccount" placeholder="请输入存款账号" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="银行名称" prop="bankName">
                    <el-input v-model="customer.bankName" placeholder="请输入银行名称" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="配偶身份证号" prop="spouseIdNumber">
                    <el-input v-model="customer.spouseIdNumber" type="textarea" placeholder="请输入配偶身份证号" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="配偶客户姓名" prop="spouseCustomerName">
                    <el-input v-model="customer.spouseCustomerName" placeholder="请输入配偶客户姓名" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="配偶客户ID" prop="spouseCustomerId">
                    <el-input v-model="customer.spouseCustomerId" placeholder="请输入配偶客户ID" />
                </el-form-item>
            </el-col>

            <el-col :span="4">
                <el-form-item label="配偶性别" prop="spouseGender">
                    <el-input v-model="customer.spouseGender" placeholder="请输入配偶性别" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="配偶电话号码" prop="spouseTel">
                    <el-input v-model="customer.spouseTel" placeholder="请输入配偶电话号码" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="配偶年收入" prop="spouseAnnualIncome">
                    <el-input v-model="customer.spouseAnnualIncome" placeholder="请输入配偶年收入" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="配偶收入来源" prop="spouseIncomeSource">
                    <el-input v-model="customer.spouseIncomeSource" placeholder="请输入配偶收入来源" />
                </el-form-item>
            </el-col>
            <template>
                <div>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="cancel">返回</el-button>
                </div>
            </template>
        </el-form>
    </el-row>
</template>


<script>
export default {
    data() {
        return {
            customer: {}, // 表单数据
            rules: {}, // 表单验证规则
        };
    },
    mounted() {
        // 在页面加载时获取数据
        this.fetchFormData();
    },
    methods: {


        save() {
            let customer = {
                name: this.customer.name,
                idNumber: this.customer.idNumber,
                documentType: this.customer.documentType,
                tel: this.customer.tel,
                creditRating: this.customer.creditRating,
                creditLimit: this.customer.creditLimit,
                township: this.customer.township,
                village: this.customer.village,
                group: this.customer.group,
                userId: this.customer.userId,
                branch: this.customer.branch,
                customerType: this.customer.customerType,

                customerAlias: this.customer.customerAlias,
                creditAmount: this.customer.creditAmount,
                fiveLevelResult: this.customer.fiveLevelResult,
                loanBalance: this.customer.loanBalance,
                customerClass: this.customer.customerClass,
                isTrue: this.customer.isTrue,
                certificateExpirationDate: this.customer.certificateExpirationDate,
                gender: this.customer.gender,
                nation: this.customer.nation,
                politicalLandscape: this.customer.politicalLandscape,
                highestEducationalLevel: this.customer.highestEducationalLevel,
                highestDegree: this.customer.highestDegree,
                registeredResidenceAddress: this.customer.registeredResidenceAddress,
                detailedAddress: this.customer.detailedAddress,
                residentialAddress: this.customer.residentialAddress,
                addressPostalCode: this.customer.addressPostalCode,
                WeChatAccount: this.customer.WeChatAccount,
                headHousehold: this.customer.headHousehold,
                poorFarmers: this.customer.poorFarmers,
                familySize: this.customer.familySize,
                relationshipBank: this.customer.relationshipBank,
                depositAccount: this.customer.depositAccount,
                bankName: this.customer.bankName,
                maritalStatus: this.customer.maritalStatus,
                spouseIdentificationType: this.customer.spouseIdentificationType,
                spouseIdNumber: this.customer.spouseIdNumber,
                spouseCustomerName: this.customer.spouseCustomerName,
                spouseCustomerId: this.customer.spouseCustomerId,
                spouseBirthday: this.customer.spouseBirthday,
                spouseGender: this.customer.spouseGender,
                spouseTel: this.customer.spouseTel,
                spouseAnnualIncome: this.customer.spouseAnnualIncome,
                spouseIncomeSource: this.customer.spouseIncomeSource,
            };
            this.axios.post("api/customer-server/addCustomer", customer).then(res => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.$router.push("/customerFiling")
                }
            })
        },
        cancel() {
            this.$router.push("/customerFiling");
        },
        fetchFormData() {
            // 模拟获取表单数据的方法
            this.form = {
                name: '',
                idNumber: '',
                tel: '',
                creditRating: '',
                creditLimit: '',
                township: '',
                village: '',
                group: '',
                userId: '',
                branch: '',
                customerAlias: '',
                creditAmount: '',
                fiveLevelResult: '',
                loanBalance: '',
                customerClass: '',
                isTrue: '',
                certificateExpirationDate: null,
                gender: '',
                // 添加其他字段并初始化为空字符串或null
            };

            // 设置表单验证规则，根据实际需要设置
            this.rules = {
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                idNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
                tel: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
                creditRating: [{ required: true, message: '请输入信用评级', trigger: 'blur' }],
                creditLimit: [{ required: true, message: '请输入信用额度', trigger: 'blur' }],
                township: [{ required: true, message: '请输入乡镇', trigger: 'blur' }],
                village: [{ required: true, message: '请输入村', trigger: 'blur' }],
                group: [{ required: true, message: '请输入组', trigger: 'blur' }],
                userId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
                branch: [{ required: true, message: '请输入支行', trigger: 'blur' }],
                customerAlias: [{ required: true, message: '请输入客户别名', trigger: 'blur' }],
                creditAmount: [{ required: true, message: '请输入信用金额', trigger: 'blur' }],
                fiveLevelResult: [{ required: true, message: '请输入五级结果', trigger: 'blur' }],
                loanBalance: [{ required: true, message: '请输入贷款余额', trigger: 'blur' }],
                customerClass: [{ required: true, message: '请输入客户等级', trigger: 'blur' }],
                isTrue: [{ required: true, message: '请输入是否真实', trigger: 'blur' }],
                certificateExpirationDate: [{ required: true, message: '请选择证件有效期', trigger: 'change' }],
                gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
                // 添加其他字段的验证规则
            };
        },
    },
};
</script>

<style scoped></style>